<template>
  <view class="order-detail-container">
    <!-- 状态头部 -->
    <view class="status-header">
      <view class="status-icon">
        <uv-icon name="clock" color="#FF6B35" size="48" />
      </view>
      <view class="status-info">
        <text class="status-text">待接单</text>
      </view>
    </view>

    <!-- 派送地址卡片 -->
    <view class="info-card">
      <view class="address-info">
        <view class="address-icon">
          <uv-icon name="map-fill" size="24" color="#FF6B35" />
        </view>
        <view class="address-details">
          <view class="address-label">派送地址</view>
          <view class="address-text">{{ orderInfo.deliveryAddress }}</view>
        </view>
      </view>
    </view>

    <!-- 产品信息卡片 -->
    <view class="info-card">
      <view class="product-info">
        <view class="product-icon">
          <view class="oil-badge">
            <image :src="orderInfo.goods_image" mode="aspectFill" style="width: 100%; height: 100%;" />
          </view>
        </view>
        <view class="product-details">
          <text class="product-name">{{ orderInfo.productName }}</text>
          <text class="product-quantity">用油量: {{ orderInfo.quantity }}升</text>
        </view>
        <view class="product-price">
          <text class="price-symbol">¥</text>
          <text class="price-amount">{{ orderInfo.goods_money }}</text>
        </view>
      </view>
    </view>

    <!-- 订单信息卡片 -->
    <view class="info-card">
      <view class="order-details">
        <view class="detail-item">
          <text class="detail-label">下单时间:</text>
          <text class="detail-value">{{ orderInfo.orderTime }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">用油时间:</text>
          <text class="detail-value">{{ orderInfo.usageTime }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">下单方式:</text>
          <text class="detail-value">{{ orderInfo.paymentMethod == 'remaining' ? '余量下单' : '余额下单' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { UserInfoManager } from '@/utils/userInfo'
import { formatDateTime } from '@/utils/dateTime'
import { useRequest } from '@/api'

const { API_JIDAN_DETAIL_GET } = useRequest()

// 路由参数
const orderId = ref('')
const loading = ref(false)


// 订单信息类型定义
interface OrderInfo {
  deliveryAddress: string
  goods_image: string
  productName: string
  quantity: number
  goods_money: string
  orderTime: string
  usageTime: string
  paymentMethod: string
}

// 订单信息
const orderInfo = ref<OrderInfo>({
  deliveryAddress: '北京市朝阳区六洲大厦',
  goods_image: '',
  productName: '-10#号汽油',
  quantity: 1,
  goods_money: '4080.05',
  orderTime: '2023.10.10 12:00',
  usageTime: '2023.10.10 12:00',
  paymentMethod: '余额下单'
})

// 统一通过 onLoad 获取路由参数，兼容 APP/H5/小程序
onLoad((options: Record<string, any>) => {
  const id = options?.id
  if (id) {
    try { orderId.value = decodeURIComponent(String(id)) } catch { orderId.value = String(id) }
    getOrderDetail()
  }
})

const imgList = ref<string[]>([])

const getOrderDetail = async () => {
  if (!orderId.value) {
    uni.showToast({
      title: '订单ID不能为空',
      icon: 'none'
    })
    return
  }

  loading.value = true
  try {
    const params = {
      id: orderId.value,
      isdriver: UserInfoManager.lastrole()
    }
    const res = await API_JIDAN_DETAIL_GET(params)
    if (res.code === 1) {
      // 兼容凭证：可能是数组、字符串或逗号分隔字符串
      const rawVouchers = (res.data && (res.data.vouchers ?? res.data.voucher)) || []
      const voucherUrls = Array.isArray(rawVouchers)
        ? rawVouchers.filter((u: any) => typeof u === 'string' && u)
        : (typeof rawVouchers === 'string' && rawVouchers)
          ? rawVouchers.split(',').map((s: string) => s.trim()).filter(Boolean)
          : []
      orderInfo.value = {
        deliveryAddress: res.data.address_detail || '',
        goods_image: res.data.goods_image || '',
        productName: res.data.goods_name || '-0#号柴油',
        quantity: res.data.usage || '-',
        goods_money: res.data.goods_money || '0',
        orderTime: formatDateTime(res.data.order_time) || '2023.10.10 12:00',
        usageTime: formatDateTime(res.data.use_time) || '2023.10.10 12:00',
        paymentMethod: res.data.order_type
      }
      imgList.value = voucherUrls
    } 
  } catch (error) {
    
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  // onLoad 中已触发详情获取，此处无需重复处理
})
</script>

<style lang="scss" scoped>
.order-detail-container {
  min-height: 100vh;
  background: #f6f7f9;
  padding: 20rpx;
}

/* 状态头部 */
.status-header {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  background: linear-gradient(to bottom, #fff4e8, #fffefd);
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .status-icon {
    margin-right: 24rpx;
  }

  .status-info {
    flex: 1;

    .status-text {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .payment-timer {
      font-size: 26rpx;
      color: #FF6B35;
      margin-top: 8rpx;
    }
  }
}



/* 信息卡片 */
.info-card {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 32rpx 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);



  .address-info {
    display: flex;
    align-items: flex-start;

    .address-icon {
      margin-right: 24rpx;
      margin-top: 4rpx;
    }

    .address-details {
      flex: 1;

      .address-label {
       
        margin-bottom: 12rpx;
      }

      .address-text {
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
        line-height: 36rpx;
      }
    }
  }

  .product-info {
    display: flex;
    align-items: center;

    .product-icon {
      margin-right: 24rpx;

      .oil-badge {
        width: 80rpx;
        height: 80rpx;
        background: #fff3ed;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .oil-type {
          font-size: 24rpx;
          font-weight: 600;
          color: #333;
          margin-top: 4rpx;
        }
      }
    }

    .product-details {
      flex: 1;

      .product-name {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }

      .product-quantity {
        font-size: 26rpx;
        color: #666;
      }
    }

    .product-price {
      text-align: right;

      .price-symbol {
        font-size: 28rpx;
        color: #FF6B35;
      }

      .price-amount {
        font-size: 36rpx;
        font-weight: 600;
        color: #FF6B35;
      }
    }
  }

  .order-details {
    .detail-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .detail-label {
        font-size: 26rpx;
        color: #666;
      }

      .detail-value {
        font-size: 26rpx;
        color: #333;
      }
    }
  }


}
</style>